import React, { useEffect, useState } from 'react';
import { history, connect } from 'umi';
import { Row, Col, Button } from 'antd';
import FormCondition from '@/components/FormCondition';
import CodeMash from './components/codeMash';
import { dateDisabled } from '@/common/regular';
export default ({ form, detail }) => {
  const [data, setData] = useState({
    editFlag: '0',
    independentFlag: '1',
    repeatFlag: '0',
    increaseSetting: '0',
    qrcodeType: 'chat',
    ...detail,
  });
  const [visible, setVisible] = useState(false);
  const { increaseSetting, repeatFlag, independentFlag, editFlag } = data;
  const formItems = [
    {
      label: '信息采集名称',
      name: 'title',
    },
    // {
    //   label: '引导标题',
    //   name: 'entryTitle',
    //   rules: [{ required: false }],
    // },
    {
      label: '引导提示文字',
      name: 'description',
      rules: [{ required: false }],
    },
    {
      label: '有效时间',
      type: 'rangePicker',
      disabledDate: dateDisabled,
      name: 'startTime',
      end: 'endTime',
      rules: [{ required: false }],
    },
    {
      label: '能否分享',
      name: 'shareFlag',
      type: 'radio',
      select: {
        0: '否',
        1: '能'
      }
    },
    {
      label: `重复采集`,
      name: 'repeatFlag',
      tips: '若信息采集关联多个场景：开启后，用户在每个场景下均需填写该信息采集；关闭后，用户在任一关联场景下填写过该信息采集时，无需重复填写',
      type: 'radio',
      select: {
        1: '开启',
        0: '关闭',
      },
    },
    {
      label: '支持独立采集',
      name: 'independentFlag',
      type: 'radio',
      tips: '开启后，可将信息采集通过链接或者二维码的形式发送给用户',
      onChange: (e) => {
        let title = form.getFieldValue('title');
        let description = form.getFieldValue('description');
        if (e.target.value == 0) {
          setData({
            ...data,
            title,
            description,
            independentFlag: e.target.value,
            qrcodeUrl: '',
            entryTitle: '',
            popTitle: '',
            qrcodeTitle: '',
            popType: '',
          });
        } else {
          setData({
            title,
            ...data,
            description,
            increaseSetting: '1',
            independentFlag: e.target.value,
            increasePageType: 'finish',
            popType: 'click',
          });
        }
      },
      select: {
        1: '开启',
        0: '关闭',
      },
    },
    {
      label: '支持引流 ',
      visible: independentFlag == '1',
      name: 'increaseSetting',
      onChange: (e) => {
        let title = form.getFieldValue('title');
        let description = form.getFieldValue('description');
        if (e.target.value == 0) {
          setData({
            ...data,
            title,
            description,
            increaseSetting: e.target.value,
            qrcodeUrl: '',
            entryTitle: '',
            popTitle: '',
            qrcodeTitle: '',
            popType: '',
            increasePageType: '',
            popType: '',
          });
        } else {
          setData({
            ...data,
            title,
            description,
            increaseSetting: e.target.value,
            increasePageType: 'finish',
            popType: 'click',
          });
        }
      },
      type: 'radio',
      tips: '开启后，当用户在独立采集页面提交采集时，将用户引流至私域',
      select: {
        1: '开启',
        0: '关闭',
      },
    },
    {
      label: '二维码地址',
      visible: independentFlag == '1' && increaseSetting == '1',
      name: 'qrcodeUrl',
      type: 'upload',
      disabled: true,
      maxFile: 1,
      extra: (
        <Button
          onClick={() => {
            setVisible({ show: true });
          }}
          type="link"
        >
          从渠道选择
        </Button>
      ),
    },
    {
      label: '入口引导语',
      visible: independentFlag == '1' && increaseSetting == '1',
      name: 'entryTitle',
      rules: [{ required: false }],
    },
    {
      label: '弹窗引导语',
      visible: independentFlag == '1' && increaseSetting == '1',
      name: 'popTitle',
      rules: [{ required: false }],
    },
    {
      label: '二维码标题',
      visible: independentFlag == '1' && increaseSetting == '1',
      name: 'qrcodeTitle',
      rules: [{ required: false }],
    },
    {
      label: '提交成功页',
      visible: independentFlag == '1' && increaseSetting == '1',
      name: 'popType',
      type: 'radio',
      rules: [{ required: false }],
      select: {
        finish: '完成页面',
        wright: '填信息页面',
      },
    },
    {
      label: '主动弹窗',
      visible: independentFlag == '1' && increaseSetting == '1',
      name: 'increasePageType',
      type: 'radio',
      rules: [{ required: false }],
      select: {
        click: '点击弹窗',
        auto: '主动弹窗',
      },
    },

    {
      label: '支持修改',
      tips: '开启后，C端用户可在商品详情页或独立采集页（需开启独立采集）修改已填写的信息采集',
      name: 'editFlag',
      type: 'radio',
      select: {
        1: '开启',
        0: '关闭',
      },
    },
  ];
  return (
    <>
      <Row style={{ marginTop: 12 }}>
        <Col offset={6} span={12}>
          <FormCondition form={form} formItems={formItems} initialValues={data}></FormCondition>
        </Col>
      </Row>
      <CodeMash
        setCode={(e) =>
          setData({
            ...data,
            qrcodeUrl: e,
          })
        }
        visible={visible}
        onClose={() => setVisible(false)}
      ></CodeMash>
    </>
  );
};
